<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <title>动态绑定class & style</title>
  <style>
    .active{
      color:red;
    }
    .fontStyle{
        font-style: italic;
    }
    .newStyle{
      background-color: blueviolet;
    }
  .oldStyle{
    background-color: brown;
  }
  </style>
</head>
<body>
  <div id="app">

    <h3>v-bind动态绑定class</h3>
    <!-- <h2 class="active">{{message}}</h2>
    <h2 :class="active">{{message}}</h2> -->

    <!-- 动态绑定class对象用法  -->
    <!-- <h2 :class="{key1:value1,key2:value2}">{{message}}</h2>
    <h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
    <h2 class="title" :class="{active:isActive}">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
    <button @click="change">点击变色</button>
  </div>
  <div id="app1">
      <h3> v-bind动态绑定class(数组用法)</h3> 
        <!-- 加上单引号当成字符串 -->
        <h2 class="title" :class="getClass()">{{message}}</h2>
        <h2 class="title" :class="['active','fontStyle']">{{message}}</h2>
        <h2 class="title" :class="getClassesArray()">{{message}}</h2>
        <!-- 不加会被当成变量 -->
        <h2 class="title" :class="[active,fontStyle]">失败的 {{message}}</h2>
        <h2 class="title" :class="getClasses()"> 失败的 {{message}}</h2> 
  </div>
  <!-- 下面这个写法真的让我有点难受，感觉vue是另外一套体系似的， 本来是想做hover的但是还没找到hover事件要怎么写 就写了click -->
  <div id="app2">
    <h3> v-for和v-bind结合</h3> 
    <p>{{name}}</p>
    <ul>
        <li v-for="(item, index) in message" :key="index" v-bind:class="[styleNew ? {newStyle:currentIndex===index} : {oldStyle:currentIndex===index}]" @click="changeStyle(index)" >{{index}} -- {{ item}}</li>
    </ul>
  </div>
  <div id="app3">
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
    <!-- 加单引号，当成字符串解析 -->
    <h2 :style="{backgroundColor:'blue'}">{{message}}</h2>
    <!-- 不加单引号，变量解析 -->
    <h2 :style="{backgroundColor: blue}"> 失败的{{message}}</h2>
    <h2 :style="getStyle()">成功的{{message}}</h2>
  </div>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"VUE",
        active:"active",//可以comment
        isActive:true
      },
      methods: {
        change(){
          this.isActive = !this.isActive
        },
        getClasses(){
          return {active:this.isActive}
        }
      },
    })
    const app1 = new Vue({ 
      el:"#app1",
      data:{
        message:"hello vue style",
        active:"aaaa",
        fontStyle:'bbbb',
        newStyle: 'newStyle',
      },
      methods: {
        getClass(){
          return this.newStyle
        },
        getClasses(){
          return [this.active,this.fontStyle]
        },
        getClassesArray(){
          return ['active','fontStyle']
        }
      },
    })
    const app2 = new Vue({
      el:"#app2",
      data:{
        message:["hello vueJs", "hello vueJs","hello vueJs","hello vueJs","hello vueJs"],
        name:"forLopp with events",
        currentIndex:-1,
        styleNew:false,
        newStyle: 'newStyle',
        oldStyle: "oldStyle" 
      },
      methods: { 
        changeStyle(index){
          //console.log(index,this.currentIndex)
          this.styleNew=true
          this.currentIndex=index
        }
      },
    })

    const app3 = new Vue({
      el:"#app3",
      data:{
        message:"hello vue style",
        style:{backgroundColor:'red'}
      },
      methods: {
        getStyle(){
          return [this.style]
        }
      }
    })
  </script>
</body>
</html>